<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Preswald - Turn Python Scripts Into Interactive Web Apps</title>
    <meta name="description" content="Create interactive data apps that run in any browser. No servers, no deployment, just Python code that generates static sites.">
    <!-- Favicon -->
    <link rel="icon" type="image/x-icon" href="assets/favicon.ico">
    <!-- Styles -->
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
</head>
<body>
    <!-- Tetris Background -->
    <div class="tetris-background">
        <div class="grid-overlay"></div>
        <div id="tetris-squares"></div>
        <div class="gradient-overlay"></div>
    </div>

    <div class="app-container">
        <!-- Header -->
        <header class="header">
            <nav class="nav-container">
                <div class="logo">
                    <a href="#hero">
                        <img src="assets/logo.png" alt="Preswald Logo">
                    </a>
                </div>
                <div class="nav-links">
                    <a href="#features" class="nav-link">Features</a>
                    <a href="#getting-started" class="nav-link">Get Started</a>
                    <a href="#use-cases" class="nav-link">Use Cases</a>
                    <a href="https://docs.preswald.com" class="nav-link" target="_blank" rel="noopener noreferrer">Docs</a>
                    <a href="https://join.slack.com/t/structuredlabs-users/shared_invite/zt-31vvfitfm-_vG1HR9hYysR_56u_PfI8Q" class="nav-link" target="_blank" rel="noopener noreferrer">Community</a>
                    <a href="https://github.com/StructuredLabs/preswald" class="github-link" target="_blank" rel="noopener noreferrer">
                        <i class="fab fa-github"></i>
                        <span class="star-count" id="github-stars">
                            <span class="star-number">...</span>
                        </span>
                    </a>
                </div>
                <button class="mobile-menu-button" aria-label="Toggle menu">
                    <i class="fas fa-bars"></i>
                </button>
            </nav>
        </header>

        <!-- Mobile Menu -->
        <div class="mobile-menu">
            <button class="mobile-menu-close" aria-label="Close menu">
                <i class="fas fa-times"></i>
            </button>
            <div class="mobile-nav-links">
                <a href="#features" class="mobile-nav-link">
                    <i class="fas fa-star"></i>
                    Features
                </a>
                <a href="#getting-started" class="mobile-nav-link">
                    <i class="fas fa-rocket"></i>
                    Get Started
                </a>
                <a href="#use-cases" class="mobile-nav-link">
                    <i class="fas fa-lightbulb"></i>
                    Use Cases
                </a>
                <a href="https://docs.preswald.com" class="mobile-nav-link" target="_blank" rel="noopener noreferrer">
                    <i class="fas fa-book"></i>
                    Docs
                </a>
                <a href="https://join.slack.com/t/structuredlabs-users/shared_invite/zt-31vvfitfm-_vG1HR9hYysR_56u_PfI8Q" class="mobile-nav-link" target="_blank" rel="noopener noreferrer">
                    <i class="fab fa-slack"></i>
                    Community
                </a>
                <a href="https://github.com/StructuredLabs/preswald" class="mobile-nav-link github-link" target="_blank" rel="noopener noreferrer">
                    <i class="fab fa-github"></i>
                    <span class="star-count" id="github-stars-mobile">
                        <span class="star-number">...</span>
                    </span>
                </a>
            </div>
        </div>

        <!-- Main Content -->
        <main class="main-content">
            <!-- Hero Section -->
            <section class="hero" id="hero">
                <div class="hero-content">
                    <!-- Backed by pill -->
                    <div class="backed-by-pill">
                        <a href="https://www.ycombinator.com/companies/structured-labs" target="_blank" rel="noopener noreferrer" class="backed-by-link">
                            <img src="assets/yc.png" alt="Y Combinator" class="backed-by-logo">
                            <span>Backed by Y Combinator</span>
                        </a>
                    </div>
                    
                    <h1>Build interactive data apps with Python</h1>
                    <p class="subtitle">Deploy anywhere. Minutes to build, zero JavaScript. Your data analysis becomes interactive instantly.</p>
                    <div class="code-block terminal">
                        <div class="terminal-content">
                            <pre><code class="copyable">pip install preswald && preswald init my_app</code></pre>
                            <button class="copy-button" aria-label="Copy to clipboard">
                                <i class="fas fa-copy"></i>
                            </button>
                        </div>
                    </div>
                    <div class="hero-buttons">
                        <a href="#getting-started" class="button primary">Get Started</a>
                        <a href="https://docs.preswald.com" class="button secondary" target="_blank" rel="noopener noreferrer">View Documentation</a>
                    </div>
                </div>
                <div class="hero-visual">
                    <div class="app-preview">
                        <div class="app-header">
                            <div class="app-controls">
                                <div class="control red"></div>
                                <div class="control yellow"></div>
                                <div class="control green"></div>
                            </div>
                            <div class="app-title">Data App</div>
                        </div>
                        <div class="app-content">
                            <!-- Sidebar -->
                            <div class="app-sidebar">
                                <div class="sidebar-header">
                                    <div class="sidebar-logo">A</div>
                                    <div class="sidebar-title">App</div>
                                </div>
                                <div class="sidebar-nav">
                                    <div class="nav-item active">
                                        <span class="nav-icon">D</span>
                                        <span class="nav-text">Dashboard</span>
                                    </div>
                                    <div class="nav-item">
                                        <span class="nav-icon">T</span>
                                        <span class="nav-text">Data</span>
                                    </div>
                                    <div class="nav-item">
                                        <span class="nav-icon">S</span>
                                        <span class="nav-text">Settings</span>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- Main Content -->
                            <div class="app-main">
                                <!-- Title and Controls -->
                                <div class="app-section">
                                    <h2 class="app-heading">Interactive Dashboard</h2>
                                    <p class="app-description">Your data analysis becomes interactive instantly.</p>
                                    
                                    <div class="controls-row">
                                        <div class="control-group">
                                            <label class="control-label">Filter</label>
                                            <div class="select-control">
                                                <span>All Data</span>
                                                <span class="dropdown-arrow">▼</span>
                                            </div>
                                        </div>
                                        <div class="control-group">
                                            <label class="control-label">Range</label>
                                            <div class="slider-control">
                                                <div class="slider-track">
                                                    <div class="slider-fill"></div>
                                                    <div class="slider-thumb"></div>
                                                </div>
                                                <span class="slider-value">50%</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                
                                <!-- Charts Section -->
                                <div class="app-section">
                                    <div class="charts-grid">
                                        <div class="chart-card">
                                            <div class="chart-header">
                                                <h3>Chart 1</h3>
                                                <div class="chart-actions">
                                                    <span class="action-icon">•</span>
                                                </div>
                                            </div>
                                            <div class="chart-content">
                                                <div class="chart-placeholder">
                                                    <div class="chart-line">
                                                        <div class="line-segment" style="height: 40%"></div>
                                                        <div class="line-segment" style="height: 70%"></div>
                                                        <div class="line-segment" style="height: 30%"></div>
                                                        <div class="line-segment" style="height: 80%"></div>
                                                        <div class="line-segment" style="height: 60%"></div>
                                                        <div class="line-segment" style="height: 90%"></div>
                                                    </div>
                                                    <div class="chart-axis">
                                                        <span>A</span>
                                                        <span>B</span>
                                                        <span>C</span>
                                                        <span>D</span>
                                                        <span>E</span>
                                                        <span>F</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        
                                        <div class="chart-card">
                                            <div class="chart-header">
                                                <h3>Chart 2</h3>
                                                <div class="chart-actions">
                                                    <span class="action-icon">•</span>
                                                </div>
                                            </div>
                                            <div class="chart-content">
                                                <div class="chart-placeholder">
                                                    <div class="pie-chart">
                                                        <div class="pie-segment" style="--angle: 45deg; --color: var(--muted-foreground);"></div>
                                                        <div class="pie-segment" style="--angle: 35deg; --color: var(--border);"></div>
                                                        <div class="pie-segment" style="--angle: 20deg; --color: var(--accent);"></div>
                                                    </div>
                                                    <div class="chart-legend">
                                                        <div class="legend-item">
                                                            <span class="legend-color"></span>
                                                            <span>Group A</span>
                                                        </div>
                                                        <div class="legend-item">
                                                            <span class="legend-color"></span>
                                                            <span>Group B</span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                
                                <!-- Data Table -->
                                <div class="app-section">
                                    <div class="table-card">
                                        <div class="table-header">
                                            <h3>Data Table</h3>
                                            <div class="table-actions">
                                                <span class="action-icon">•</span>
                                            </div>
                                        </div>
                                        <div class="table-wrapper">
                                            <div class="table-content">
                                                <div class="table-row">
                                                    <div class="table-cell">Item 1</div>
                                                    <div class="table-cell">123</div>
                                                    <div class="table-cell">Value A</div>
                                                    <div class="table-cell positive">Active</div>
                                                </div>
                                                <div class="table-row">
                                                    <div class="table-cell">Item 2</div>
                                                    <div class="table-cell">456</div>
                                                    <div class="table-cell">Value B</div>
                                                    <div class="table-cell positive">Active</div>
                                                </div>
                                                <div class="table-row">
                                                    <div class="table-cell">Item 3</div>
                                                    <div class="table-cell">789</div>
                                                    <div class="table-cell">Value C</div>
                                                    <div class="table-cell negative">Inactive</div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                
                                <!-- Chat Interface -->
                                <div class="app-section">
                                    <div class="chat-card">
                                        <div class="chat-header">
                                            <h3>AI Assistant</h3>
                                            <span class="chat-status">Ready</span>
                                        </div>
                                        <div class="chat-messages">
                                            <div class="message user">
                                                <div class="message-content">Show me the data</div>
                                            </div>
                                            <div class="message assistant">
                                                <div class="message-content">Here's your interactive data analysis. You can filter, sort, and explore the results.</div>
                                            </div>
                                        </div>
                                        <div class="chat-input">
                                            <input type="text" placeholder="Ask about your data..." />
                                            <button class="send-button">Send</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            <!-- Value Proposition Section -->
            <section class="value-prop">
                <div class="value-content">
                    <h2>The missing link between data science and web apps</h2>
                    <p class="value-subtitle">Stop struggling with JavaScript. Start building interactive web apps with Python.</p>
                    
                    <div class="value-grid">
                        <div class="value-card">
                            <div class="value-icon">
                                <i class="fas fa-file-export"></i>
                            </div>
                            <h3>Generate static sites</h3>
                            <p>Run `preswald export` and get a complete static website. Deploy to any hosting platform without servers or complex infrastructure.</p>
                        </div>
                        
                        <div class="value-card">
                            <div class="value-icon">
                                <i class="fas fa-shield-alt"></i>
                            </div>
                            <h3>Runs anywhere, even offline</h3>
                            <p>Your data stays on your computer. Perfect for sensitive data, air-gapped environments, or when you need to work offline.</p>
                        </div>
                        
                        <div class="value-card">
                            <div class="value-icon">
                                <i class="fas fa-bolt"></i>
                            </div>
                            <h3>Fast and reactive</h3>
                            <p>Built on Python + DuckDB in the browser. Only re-runs what's needed, making complex apps feel instant.</p>
                        </div>
                        
                        <div class="value-card">
                            <div class="value-icon">
                                <i class="fas fa-code"></i>
                            </div>
                            <h3>Write in Python, not JavaScript</h3>
                            <p>Use your existing Python skills. No need to learn web frameworks or JavaScript. Just write Python code.</p>
                        </div>
                    </div>
                </div>
            </section>

            <!-- Features Section -->
            <section class="features" id="features">
                <h2>Everything you need to build data apps</h2>
                <p>Powerful features that work together to create professional data applications</p>
              
                <div class="feature-grid">
                  <div class="feature-card">
                    <i class="fas fa-database"></i>
                    <h3>Full Python data stack</h3>
                    <p>DuckDB for fast SQL queries, pandas for data manipulation, and all your favorite Python libraries. Handle large datasets efficiently.</p>
                  </div>
              
                  <div class="feature-card">
                    <i class="fas fa-chart-bar"></i>
                    <h3>Beautiful visualizations</h3>
                    <p>Plotly, Matplotlib, and custom charts. Create interactive dashboards that respond to user input in real-time.</p>
                  </div>

                  <div class="feature-card">
                    <i class="fas fa-table"></i>
                    <h3>Interactive data tables</h3>
                    <p>Sort, filter, and explore your data with built-in tables. Export results and drill down into specific data points.</p>
                  </div>                  
              
                  <div class="feature-card">
                    <i class="fas fa-comments"></i>
                    <h3>AI-ready chat interface</h3>
                    <p>Built-in chat components for natural language data exploration. Perfect for AI agents and conversational analytics.</p>
                  </div>
              
                  <div class="feature-card">
                    <i class="fas fa-sliders-h"></i>
                    <h3>Interactive controls</h3>
                    <p>Sliders, dropdowns, text inputs, and checkboxes that automatically update your app. Build dynamic, responsive interfaces.</p>
                  </div>
              
                  <div class="feature-card">
                    <i class="fas fa-mobile-alt"></i>
                    <h3>Works on any device</h3>
                    <p>Automatic responsive design that looks great on desktop, tablet, and mobile. No additional configuration needed.</p>
                  </div>
              
                  <div class="feature-card">
                    <i class="fas fa-download"></i>
                    <h3>Deploy anywhere</h3>
                    <p>Export apps as static sites and deploy to any hosting platform. No servers, no backend infrastructure needed.</p>
                  </div>
              
                  <div class="feature-card">
                    <i class="fas fa-cogs"></i>
                    <h3>Smart dependency tracking</h3>
                    <p>Preswald automatically tracks what depends on what. Only recompute what's changed, making your apps fast and efficient.</p>
                  </div>
              
                  <div class="feature-card">
                    <i class="fas fa-palette"></i>
                    <h3>Custom branding</h3>
                    <p>Add your logo, colors, and styling to match your organization's brand. Professional appearance out of the box.</p>
                  </div>
                </div>
            </section>

            <!-- Getting Started Section -->
            <section class="getting-started" id="getting-started">
                <h2>Get started in 3 minutes</h2>
                <p>Launch your first interactive data app in just a few simple steps.</p>
                <div class="steps-horizontal">
                  <div class="step-horizontal">
                    <div class="step-number-circle">1</div>
                    <h3>Install instantly</h3>
                    <p>Get up and running with a single command. No complex setup or dependencies. Just pure Python.</p>
                    <div class="step-command">pip install preswald</div>
                  </div>
                  <div class="step-horizontal">
                    <div class="step-number-circle">2</div>
                    <h3>Bootstrap your project</h3>
                    <p>Generate a ready-to-edit app template. Start building with best practices and example code included.</p>
                    <div class="step-command">preswald init my_data_app</div>
                  </div>
                  <div class="step-horizontal">
                    <div class="step-number-circle">3</div>
                    <h3>Build, run & share</h3>
                    <p>Write your logic in Python, preview changes live, and share your interactive app with a single export.</p>
                    <div class="step-command">cd my_data_app<br>preswald run</div>
                  </div>
                </div>
            </section>

            <!-- Use Cases Section -->
            <section class="use-cases" id="use-cases">
                <h2>Perfect for these use cases</h2>
                <p>From data exploration to client delivery, Preswald handles it all</p>
                
                <div class="use-case-grid">
                    <div class="use-case-card">
                        <div class="use-case-icon">
                            <i class="fas fa-chart-pie"></i>
                        </div>
                        <h3>Analyst dashboards</h3>
                        <p>Build interactive dashboards for stakeholders who need insights, not code. Deploy as static sites that update with new data.</p>
                        <div class="use-case-example">
                            <strong>Example:</strong> Sales performance dashboard with drill-down capabilities
                        </div>
                    </div>
                    
                    <div class="use-case-card">
                        <div class="use-case-icon">
                            <i class="fas fa-file-alt"></i>
                        </div>
                        <h3>Interactive reports</h3>
                        <p>Deliver reports that update live based on user input. Perfect for quarterly reviews and executive presentations.</p>
                        <div class="use-case-example">
                            <strong>Example:</strong> Financial reporting with parameterized date ranges
                        </div>
                    </div>
                    
                    <div class="use-case-card">
                        <div class="use-case-icon">
                            <i class="fas fa-search"></i>
                        </div>
                        <h3>Data exploration tools</h3>
                        <p>Explore files, logs, or snapshots with purpose-built UIs. Great for debugging, research, and data discovery.</p>
                        <div class="use-case-example">
                            <strong>Example:</strong> Log analysis tool with filtering and visualization
                        </div>
                    </div>
                    
                    <div class="use-case-card">
                        <div class="use-case-icon">
                            <i class="fas fa-laptop"></i>
                        </div>
                        <h3>Offline field kits</h3>
                        <p>Package apps for fieldwork or secure environments. Perfect for research, compliance, and remote work.</p>
                        <div class="use-case-example">
                            <strong>Example:</strong> Field data collection with offline processing
                        </div>
                    </div>
                    
                    <div class="use-case-card">
                        <div class="use-case-icon">
                            <i class="fas fa-flask"></i>
                        </div>
                        <h3>Experiment panels</h3>
                        <p>Compare runs, track metrics, and present results in standalone interactive apps. Ideal for ML/AI experimentation.</p>
                        <div class="use-case-example">
                            <strong>Example:</strong> Model comparison dashboard with performance metrics
                        </div>
                    </div>
                    
                    <div class="use-case-card">
                        <div class="use-case-icon">
                            <i class="fas fa-robot"></i>
                        </div>
                        <h3>AI agent tools</h3>
                        <p>Give AI systems structured, modifiable tools. Apps are fully inspectable and programmable by agents.</p>
                        <div class="use-case-example">
                            <strong>Example:</strong> Data analysis assistant with conversational interface
                        </div>
                    </div>
                </div>
            </section>
              
            <!-- Call to Action Section -->
            <section class="cta-section">
                <div class="cta-content">
                    <h2>Ready to build interactive web apps?</h2>
                    <p>Join data scientists and analysts who are already using Preswald to create interactive, deployable data applications.</p>
                    <div class="cta-buttons">
                        <a href="https://pypi.org/project/preswald/" class="button primary" target="_blank" rel="noopener noreferrer">Install Preswald</a>
                        <a href="https://docs.preswald.com" class="button secondary" target="_blank" rel="noopener noreferrer">Read Documentation</a>
                    </div>
                </div>
            </section>
        </main>

        <!-- Footer -->
        <footer class="footer">
            <div class="footer-content">
                <div class="footer-left">
                    <a href="https://structuredlabs.com" target="_blank" rel="noopener noreferrer" class="footer-link">
                        <img src="assets/symbol.svg" alt="Structured Labs Logo" class="footer-logo" style="height: 20px; margin-right: 4px; vertical-align: middle;">
                        Built by Structured Labs, Inc.</a>
                </div>
                <div class="footer-right">
                    <a href="https://www.linkedin.com/company/structuredlabs/" class="social-link" target="_blank" rel="noopener noreferrer">
                        <i class="fab fa-linkedin"></i>
                    </a>
                    <a href="https://twitter.com/StructuredLabs" class="social-link" target="_blank" rel="noopener noreferrer">
                        <i class="fab fa-twitter"></i>
                    </a>
                    <a href="https://github.com/StructuredLabs/preswald" class="social-link" target="_blank" rel="noopener noreferrer">
                        <i class="fab fa-github"></i>
                    </a>
                    <a href="https://join.slack.com/t/structuredlabs-users/shared_invite/zt-31vvfitfm-_vG1HR9hYysR_56u_PfI8Q" class="social-link" target="_blank" rel="noopener noreferrer">
                        <i class="fab fa-slack"></i>
                    </a>
                </div>
            </div>
        </footer>
    </div>

    <script>
        // Smooth scrolling for anchor links
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                const target = document.querySelector(this.getAttribute('href'));
                if (target) {
                    target.scrollIntoView({
                        behavior: 'smooth',
                        block: 'start'
                    });
                }
            });
        });

        // Intersection Observer for fade-in animations
        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    entry.target.classList.add('fade-in');
                }
            });
        }, {
            threshold: 0.1
        });

        document.querySelectorAll('section').forEach(section => {
            observer.observe(section);
        });

        // Copy button functionality
        const copyButton = document.querySelector('.copy-button');
        copyButton.addEventListener('click', () => {
            const codeElement = document.querySelector('.copyable');
            navigator.clipboard.writeText(codeElement.textContent);
            
            // Visual feedback
            const originalIcon = copyButton.innerHTML;
            copyButton.innerHTML = '<i class="fas fa-check"></i>';
            setTimeout(() => {
                copyButton.innerHTML = originalIcon;
            }, 2000);
        });

        // Mobile Menu Toggle
        const mobileMenuButton = document.querySelector('.mobile-menu-button');
        const mobileMenuClose = document.querySelector('.mobile-menu-close');
        const mobileMenu = document.querySelector('.mobile-menu');
        const body = document.body;

        function toggleMenu() {
            mobileMenu.classList.toggle('active');
            body.style.overflow = mobileMenu.classList.contains('active') ? 'hidden' : '';
        }

        mobileMenuButton.addEventListener('click', toggleMenu);
        mobileMenuClose.addEventListener('click', toggleMenu);

        // Close menu when clicking a link
        document.querySelectorAll('.mobile-nav-link').forEach(link => {
            link.addEventListener('click', () => {
                mobileMenu.classList.remove('active');
                body.style.overflow = '';
            });
        });

        // GitHub Star Count Functionality
        async function fetchGitHubStars() {
            try {
                const response = await fetch('https://api.github.com/repos/StructuredLabs/preswald');
                if (response.ok) {
                    const data = await response.json();
                    const starCount = data.stargazers_count;
                    
                    // Update both desktop and mobile star counts
                    const desktopStarNumber = document.querySelector('#github-stars .star-number');
                    const mobileStarNumber = document.querySelector('#github-stars-mobile .star-number');
                    
                    if (desktopStarNumber) {
                        desktopStarNumber.textContent = formatStarCount(starCount);
                    }
                    if (mobileStarNumber) {
                        mobileStarNumber.textContent = formatStarCount(starCount);
                    }
                }
            } catch (error) {
                console.log('Could not fetch GitHub stars:', error);
                // Hide star count elements if fetch fails
                const starElements = document.querySelectorAll('.star-count');
                starElements.forEach(el => el.style.display = 'none');
            }
        }

        function formatStarCount(count) {
            if (count >= 1000) {
                return (count / 1000).toFixed(1) + 'k';
            }
            return count.toString();
        }

        // Fetch star count when page loads
        fetchGitHubStars();

        // Tetris Background Generation
        function createTetrisBackground() {
            const tetrisColors = [
                '#00FFFF', // I piece - Cyan
                '#FFFF00', // O piece - Yellow
                '#800080', // T piece - Purple
                '#00FF00', // S piece - Green
                '#FF0000', // Z piece - Red
                '#0000FF', // J piece - Blue
                '#FFA500', // L piece - Orange
            ];

            function updateDimensions() {
                const width = window.innerWidth;
                const height = window.innerHeight;
                
                // Adjust cell size based on screen width
                let cellSize = 96; // 6rem = 96px
                if (width < 640) { // sm breakpoint
                    cellSize = 48; // 3rem = 48px
                } else if (width < 1024) { // lg breakpoint
                    cellSize = 64; // 4rem = 64px
                }
                
                return {
                    numCols: Math.ceil(width / cellSize),
                    numRows: Math.ceil(height / cellSize),
                    cellSize
                };
            }

            function generateTetrisSquares() {
                const dimensions = updateDimensions();
                const container = document.getElementById('tetris-squares');
                container.innerHTML = '';

                // Generate gracefully distributed colored squares
                const totalCells = dimensions.numCols * dimensions.numRows;
                const maxColored = Math.min(800, Math.floor(totalCells * 0.38)); // 38% of grid, max 60

                // Define a central safe area (center 3x3 or 4x4 cells depending on grid size)
                const safeAreaRows = Math.max(3, Math.floor(dimensions.numRows / 4));
                const safeAreaCols = Math.max(3, Math.floor(dimensions.numCols / 4));
                const safeRowStart = Math.floor((dimensions.numRows - safeAreaRows) / 2);
                const safeRowEnd = safeRowStart + safeAreaRows - 1;
                const safeColStart = Math.floor((dimensions.numCols - safeAreaCols) / 2);
                const safeColEnd = safeColStart + safeAreaCols - 1;

                // Define the ring area (expand safe area by 2 cells in each direction)
                const ringPadding = 2;
                const ringRowStart = Math.max(0, safeRowStart - ringPadding);
                const ringRowEnd = Math.min(dimensions.numRows - 1, safeRowEnd + ringPadding);
                const ringColStart = Math.max(0, safeColStart - ringPadding);
                const ringColEnd = Math.min(dimensions.numCols - 1, safeColEnd + ringPadding);

                // Generate all possible positions, only include those in the inverse ring
                const allPositions = Array.from({ length: totalCells }, (_, idx) => {
                    const row = Math.floor(idx / dimensions.numCols);
                    const col = idx % dimensions.numCols;
                    // Inverse ring: include if inside safe area OR outside the ring area
                    const inSafeArea = (
                        row >= safeRowStart && row <= safeRowEnd &&
                        col >= safeColStart && col <= safeColEnd
                    );
                    const inRingArea = (
                        row >= ringRowStart && row <= ringRowEnd &&
                        col >= ringColStart && col <= ringColEnd
                    );
                    const inRingBand = inRingArea && !inSafeArea;
                    if (inSafeArea || !inRingBand) {
                        return { row, col };
                    }
                    return null;
                }).filter((pos) => pos !== null);

                // Shuffle positions
                for (let i = allPositions.length - 1; i > 0; i--) {
                    const j = Math.floor(Math.random() * (i + 1));
                    [allPositions[i], allPositions[j]] = [allPositions[j], allPositions[i]];
                }

                // Place colored blocks so that no two are adjacent (including diagonally)
                const coloredSet = new Set();
                const coloredSquares = [];
                for (const pos of allPositions) {
                    const { row, col } = pos;
                    // Check all 8 neighbors
                    let hasNeighbor = false;
                    for (let dr = -1; dr <= 1; dr++) {
                        for (let dc = -1; dc <= 1; dc++) {
                            if (dr === 0 && dc === 0) continue;
                            if (coloredSet.has(`${row + dr},${col + dc}`)) {
                                hasNeighbor = true;
                                break;
                            }
                        }
                        if (hasNeighbor) break;
                    }
                    if (!hasNeighbor && coloredSquares.length < maxColored) {
                        coloredSet.add(`${row},${col}`);
                        coloredSquares.push({
                            row,
                            col,
                            color: tetrisColors[Math.floor(Math.random() * tetrisColors.length)]
                        });
                    }
                    if (coloredSquares.length >= maxColored) break;
                }

                // Create DOM elements for colored squares
                coloredSquares.forEach((square, i) => {
                    const squareElement = document.createElement('div');
                    squareElement.className = 'tetris-square';
                    squareElement.style.cssText = `
                        top: ${square.row * dimensions.cellSize}px;
                        left: ${square.col * dimensions.cellSize}px;
                        background-color: ${square.color};
                    `;
                    container.appendChild(squareElement);
                });
            }

            // Initial generation
            generateTetrisSquares();

            // Regenerate on window resize
            let resizeTimeout;
            window.addEventListener('resize', () => {
                clearTimeout(resizeTimeout);
                resizeTimeout = setTimeout(generateTetrisSquares, 100);
            });
        }

        // Initialize Tetris background
        createTetrisBackground();
    </script>
</body>
</html> 
